import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

export default function Header() {
  // let [userName, setUserName] = useState(""); //空字符串表示尚未登录
  let [userName,setUserName]=useState("")   //当前yaya用户登录
  let [kw,setKw]=useState("")
  // 调用钩子函数--必须在组件最顶部
  let nav=useNavigate()
  let logout=(e)=>{
    // console.log('111');此处JSX中的时间是"合称虚拟事件"对象,功能与真实dom中的时间对象一直
    // 1.阻止超链接的默认行为(跳转动作)执行
    e.preventDefault()
    // 1.清除此处登录的痕迹
    delete localStorage['userToken']  //删除保存在本地缓存中的身份令牌
    // JS小知识点:delete关键字用于删除对象或类数组对象中的成员
    //2.跳转到登录页
    nav('/login')
  }
  // 处理搜索框中输入改变事件
  let doKwChange=(e)=>{
    // clg(e)         //虚拟事件对象
    // clg(e.target)  //事件源对象-此刻是一个受控组件
    // clg(e.traget.value)  //输入框中的最新输入内容
    let v=e.target.value
    // 应用1:只允许在输入框中输入大写
    //  v=v.toUpperCase()
    // 应用2:不允许输入空白字符
    //  v=v.trim()
    //  应用3:长度不能超6位
    // v=v.substring(0.6)
    setKw(v)        //修改了模型变量,而此变量又控制着输入框的显示
  }
  return (
    <div className="header_box">
      <header className="header container">
        <h1 className="logo">
          <Link to="/" className="link"></Link>
        </h1>
        <div className="h_con">
          <ul className="clearfloat">
            <li className="phone">4000-585-116</li>
            <li>
              <Link to="/">中文</Link>
            </li>
            <li>
              <em>|</em>
            </li>
            <li>
              <Link to="/">English</Link>
            </li>
            <li>
              <Link to="/wixin" className="weixin"></Link>
            </li>
            <li>
              <Link to="/weibo" className="weibo"></Link>
            </li>
            {userName ? (
              <>
                <li className="top_user">
                  <Link to="/ucenter">欢迎回来:{userName}</Link>
                </li>
                <li className="top_quit">
                  <Link onClick={logout}>退出</Link>
                </li>
              </>
            ) : (
              <>
                <li>
                  <Link to="/login" className="h_login">登录</Link>
                </li>
                <li>
                  <em>|</em>
                </li>
                <li>
                  <Link to="/register" className="h_register">注册</Link>
                  </li>
              </>
            )}
            
          </ul>
          <div className="search clearfloat">
            <button type="button" onClick={beginSearch}></button>
            <input type="text"  value={kw} onChange={doKwChange}/>
          </div>
        </div>
      </header>
      {/*nav*/}
      <nav className="navbar">
        <div className="container">
          <div className="nav">
            <ul>
              <li>
                <Link to="/">
                  <span className="icon_home"></span>首页
                </Link>
              </li>
              <li>
                <Link to="/about">关于净美仕</Link>
              </li>
              <li>
                <Link to="/news">公司动态</Link>
              </li>
              <li className="nav_pd">
                <Link to="product.html">
                  产品中心<span className="icon_pd"></span>
                </Link>
                <div className="pd_dropdown">
                  <Link to="/product.html?type=1">净美仕净化器</Link>
                  <Link to="/product.html?type=2">净美仕滤网</Link>
                </div>
              </li>
              <li>
                <Link to="/contact">联系我们</Link>
              </li>
            </ul>
          </div>
          <div className="s_cart">
            <Link to="/cart">
              <span className="icon_cart"></span>购物车(
              <strong id="cart_sum">0</strong>)<span className="icon_sj"></span>
            </Link>
            <div className="cart_dropdown">
              {/*<h3>您的购物车为空~</h3>*/}
              <ul>
                {/*<li>*/}
                {/*<a to=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>*/}
                {/*<div>*/}
                {/*<span>-</span><input type="text" value="2"/><span>+</span>*/}
                {/*</div>*/}
                {/*<strong>¥1599.00</strong>*/}
                {/*<em></em>*/}
                {/*</li>*/}
                {/*<li>*/}
                {/*<a to=""><img src="product-imgs/jhq-m8088a.jpg" alt=""/></a>*/}
                {/*<div>*/}
                {/*<span>-</span><input type="text" value="2"/><span>+</span>*/}
                {/*</div>*/}
                {/*<strong>¥1599.00</strong>*/}
                {/*<em></em>*/}
                {/*</li>*/}
              </ul>
              <div className="cd_js clearfloat">
                <span>
                  共计：<strong>0.00</strong>
                </span>
                <Link to="/">结算</Link>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  );
}
